<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <!--<meta http-equiv="Access-Control-Allow-Origin" content="*">-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实名认证</title>
    <link rel="stylesheet" href="../../css/base.css">
    <!--<link rel="stylesheet" href="../../css/globle.css">-->
    <link rel="stylesheet" href="../../css/merchantEntry.css">
    <script src="../../js/jquery-2.2.3.min.js"></script>
    <script src="../../js/rem.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/yutil-1.0.1.js"></script>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        ul,li{
            margin: 0;
            padding:0;
        }
        .image-div{
            padding: 30px 50px;
            border-radius: 10px;
            background-color: #fff;
            margin: 40px 30px 0;
        }
        .image-div .title{
            height: 70px;
            line-height: 70px;
            font-size: 32px;
            color: #5f5f5f;
            font-weight: 500;
        }
        .upload-div,
        .show-div{
            /*margin-top: 20px;*/
        }
        .upload-div .upload-ul,
        .show-div .show-image-ul{
            letter-spacing: -0.5em;
        }
        .upload-div .upload-ul .upload-li,
        .show-div .show-image-ul .show-image-li{
            height: 131px;
            width: 131px;
            margin-right: 22px;
            letter-spacing: normal;
            display: inline-block;
            margin-top: 20px;
        }
        .show-div .show-image-ul .show-image-li img{
            height: 100%;
            width: 100%;
        }
        .upload-div .upload-ul .upload-li:nth-child(4n),
        .show-div .show-image-ul .show-image-li:nth-child(4n){
            margin-right: 0;
        }
        .upload-div .upload-ul .upload-li .item{
            height: 100%;
            width: 100%;
            border-radius: 10px;
            border: 3px dashed #97def1;
            position: relative;
        }
        .upload-div .upload-ul .upload-li .item.image{
            border: none;
            font-size: 0;
        }
        .upload-div .upload-ul .upload-li .item .delete-image{
            position: absolute;
            height: 25px;
            top: -12.5px;
            left: -12.5px;
        }
        .upload-div .upload-ul .upload-li .item .upload-image{
            height: 100%;
            width: 100%;
            border-radius: 10px;
            vertical-align:initial;
        }
        .img-input-form{
            position: absolute;
            height: 131px;
            width: 131px;
            z-index: 999;
        }
        .img-input-form input{
            position: absolute;
            top: 0;
            left: 0;
            height: 131px;
            width: 131px;
        }
        .photo-span{
            display: inline-block;
            position: absolute;
            height: 32px;
            width: 39px;
            border-radius: 5px;
            border: 3px solid #97def1;
            left: 50%;
            top: 50%;
            margin-top: -16px;
            margin-left: -19.5px;
        }
        .circle-span{
            display: inline-block;
            position: absolute;
            height: 14px;
            width: 14px;
            border-radius: 7px;
            border: 3px solid #97def1;
            left: 50%;
            top: 50%;
            margin-top: -7px;
            margin-left: -7px;
        }
        .circle-solid-span{
            display: inline-block;
            position: absolute;
            height: 4px;
            width: 4px;
            border-radius: 2px;
            background-color: #97def1;
            left: 50%;
            top: 50%;
            margin-top: -10px;
            margin-left: 9px;
        }
        .btm-btn{
            height: 100px;
            width: 500px;
            border-radius: 50px;
            text-align: center;
            font-size: 26px;
            color: #fff;
            background-color: #ff7e00;
            margin-left: 125px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

    </style>
    <style>
        #preview img{
            width: 100%;
            height: 100%;
        }
        .upPP{
            width: 100%;
            font-size: 50px;
            height: 100%;
            line-height: 50px;
            text-align: center;
            float: left;
            margin: 0;
        }
        .inp{
            position: relative;
        }
        .inp1{
            position: relative;
        }
        .inp-tx {
            width: 0.78rem;
            height: 0.78rem;
            display: block;
            margin-top: 0.2rem;
            margin-left: 0.2rem;
        }
        .inp-tx1 {
            width: 0.78rem;
            height: 0.78rem;
            display: block;
            margin-top: 0.2rem;
            margin-left: 0.2rem;
        }
        .tx{
            position: absolute;
            top: 0;
            left: 0;
            width: 90%;
            height: 1.58rem;
            margin-left: 0.2rem;
            opacity: 0;
        }
        .tx1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 90%;
            height: 1.58rem;
            margin-left: 0.2rem;
            opacity: 0;
        }
    </style>
</head>

<body style="background-color: #F5F5F5">
    <div class="head">
        <div class="h-left" onclick="window.history.go(-1)"></div>
        <div class="h-middle">实名认证</div>
        <div class="h-right"></div>
    </div>
    <div style="height: .44rem;"></div>
<form id="add_news"  >
    <p class="notes">请填写您的真实身份信息，通过审核后将不能修改</p>
    <div class="container">
        <div class="cont">
            <div class="c-left">
                姓名
            </div>
            <div class="c-right">
                <input type="text" name="realName" value="" id="realName"  placeholder="请输入真实姓名" class="c-inp c-inp-username">
                <input type="hidden" name="userId" value="1"   class="c-inp c-inp-username">
            </div>
        </div>
        <div class="cont">
            <div class="c-left">
                证件类型
            </div>
            <div class="c-right" style="color: #262626;">
                身份证 <img src="../../img/icon-right.png" alt="">
            </div>
        </div>
        <div class="cont" style="border-bottom: 0">
            <div class="c-left">
                身份证号
            </div>
            <div class="c-right">
                <input type="text" name="cardId" id="cardId" placeholder="请输入正确的身份证号" value="" class="c-inp c-inp-number">
            </div>
        </div>
    </div>
    <p class="notes">
        上传证件照
        <span>(拍摄法人手持第二代身份证照片,请确保图片清晰）</span>
    </p>

    <div class="inp">
        <img class="inp-tx" src="../../img/shenfenzheng.png" style="width: 2.85rem;height: 1.6rem;display: block;margin: 0 auto;margin-top: .4rem" alt="" />
        <input class="tx" style="top: 0;" id="file1" type="file" accept="image/*" name="file">
        <input type="hidden" id='img_url'>
    </div>


    <p class="notes">
        上传证件照
        <span>(拍摄法人手持第二代身份证照片,请确保图片清晰）</span>
    </p>
    <div class="inp1">
        <img class="inp-tx1" src="../../img/shenfenzheng.png" style="width: 2.85rem;height: 1.6rem;display: block;margin: 0 auto;margin-top: .4rem" alt="" />
        <input class="tx" style="top: 0;" id="file2" type="file" accept="image/*" name="file">
        <input type="hidden" id='img_url2'>
    </div>


</form>

    <!--<div class="zhuanZhang_PZ">-->
        <!--<p class="title">转账凭证</p>-->
        <!--<div class="inp">-->
            <!--<img class="inp-tx" src="" alt="" />-->
            <!--<input class="tx" style="top: 0;" id="file" type="file" accept="image/*" name="file">-->
            <!--<input type="hidden" class='img_url'>-->
        <!--</div>-->
        <!--&lt;!&ndash;<img class="Add_pictures" src="../img/g_TJTP.png" alt="" />&ndash;&gt;-->
        <!--<p class="Add_pictures_zi">点击上传转账凭证</p>-->
    <!--</div>-->
   <!-- 用户图像：<input style="display:none;" id="userface" type="file" onchange="preview(this)">
    <br>
    <div id="preview" style="width: 50px; height: 50px; border: 1px solid red;">
        <p class="upPP" style="width: 100%;">+</p >
    </div>-->
    <div class="submit" onclick="subAuthentication()" style="margin-bottom: .3rem">提交认证</div>
</body>

<script>
    //上传图片
    var image1 = image2 =null;
    var data = {};
    var url=SURL+'/jfd/upload/pictureUpload';

    $('#file1').change(function(){
        var dom_obj = $(this).get(0);
        var jq_el = $(this);
        var result = new FileReader();
        result.readAsDataURL(dom_obj.files[0]);
        result.onload = function() {
            jq_el.siblings('img').attr('src',this.result);
            image1 = this.result;

            var formData = new FormData();
            var file = document.getElementById("file1").files[0];
            formData.append("cardUrl", file);
            //得到xhr对象
            var xhr = null;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.open("post", url, true);//设置提交方式，url，异步提交
            xhr.onload = function () {
                var data = xhr.responseText;    //得到返回值
                console.log(data)
                var data = eval('(' + data + ')');
                if(data.code===0){
                    //$('#img_url1').val(image1);
                    $('#img_url').val(data.data.url)
                }
            }
            xhr.send(formData);

        }
    });

    $('#file2').change(function(){
        var dom_obj = $(this).get(0);
        var jq_el = $(this);
        var result = new FileReader();
        result.readAsDataURL(dom_obj.files[0]);
        result.onload = function() {
            jq_el.siblings('img').attr('src',this.result);
            image2 = this.result;

            var formData2 = new FormData();
            var file2 = document.getElementById("file2").files[0];
            formData2.append("cardBackUrl", file2);
            //得到xhr对象
            var xhr = null;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xhr.open("post", url, true);//设置提交方式，url，异步提交
            xhr.onload = function () {
                var data = xhr.responseText;    //得到返回值
                var data = eval('(' + data + ')');
                if(data.code===0){
                    //$('#img_url2').val(image2);
                    $('#img_url2').val(data.data.url)
                }
            }
            xhr.send(formData2);

        }
    });

</script>



<script>
    function preview(file) {
        var prevDiv = document.getElementById('preview');
// if (file.files && file.files[0]) {
        var reader = new FileReader();
        reader.onload = function (evt) {
            prevDiv.innerHTML = '< img src="' + evt.target.result + '" />';
        }
        reader.readAsDataURL(file.files[0]);
// } else {
// prevDiv.innerHTML =
// '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
// file.value + '\'"></div>';
// }
        var formData = new FormData();
        formData.append("file", $("#userface")[0].files[0]);
        $.ajax({
            url: SURL + '/jfd/upload/pictureUpload',
            type: 'post',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
            }
        })
    }
    $('#preview').click(function () {
        $('#userface').click();
    })
</script>
<script>
    // var image =null;
    // var data = {};
    //
    // $('.tx').change(function(){
    //     var dom_obj = $(this).get(0);
    //     var jq_el = $(this);
    //     var result = new FileReader();
    //     result.readAsDataURL(dom_obj.files[0]);
    //     result.onload = function() {
    //         jq_el.siblings('img').attr('src',this.result);
    //         image = this.result;
    //
    //         var url=SURL+'/jfd/upload/pictureUpload';
    //
    //         var formData = new FormData();
    //         var file = document.getElementById("#file").files[0];
    //         formData.append("file", file);
    //         //得到xhr对象
    //         var xhr = null;
    //         if (XMLHttpRequest) {
    //             xhr = new XMLHttpRequest();
    //         } else {
    //             xhr = new ActiveXObject("Microsoft.XMLHTTP");
    //         }
    //
    //         xhr.open("post", url, true);//设置提交方式，url，异步提交
    //         xhr.onload = function () {
    //             var data = xhr.responseText;    //得到返回值
    //             console.log(data)
    //             var data = eval('(' + data + ')');
    //             if(data.code===0){
    //                 $('.img_url').val(image);
    //                 //$('#img_url').val(data.data.url)
    //                 console.log($('.img_url').val());
    //             }
    //         }
    //         xhr.send(formData);
    //
    //     }
    // });

    // var upfileSelect = document.getElementById("upfileSelect"),
    //     upfileElem = document.getElementById("upfileElem");
    //
    // // 正面身份证照片
    // upfileSelect.addEventListener("click", function (e) {
    //     if (upfileElem) {
    //         upfileElem.click();
    //     }
    //     e.preventDefault(); // prevent navigation to "#"
    // }, false);
    //
    //
    //
    //
    // // 反面身份证照片
    // var downfileSelect = document.getElementById("downfileSelect"),
    //     downfileElem = document.getElementById("downfileElem");
    //
    // downfileSelect.addEventListener("click", function (e) {
    //     if (downfileElem) {
    //         downfileElem.click();
    //     }
    //     e.preventDefault(); // prevent navigation to "#"
    // }, false);
    //
    // //提交正面的图片
    // function  asd() {
    //     var formData = new FormData();
    //
    //     formData.append('file',upfileElem.files[0]);
    //
    //     console.log(formData.get('file'));
    //
    //
    //     $.ajax({
    //         url: SURL+'/jfd/upload/pictureUpload',
    //         type: 'post',
    //         data:formData,
    //         cache: false,
    //         processData: false,
    //         contentType: false,
    //         success: function (res) {
    //             console.log(res,'z上传成功');
    //             $('#frontview').val(res.data.url);
    //             $('#upfileSelect').attr('src',res.data.url);
    //         }
    //     })
    // }
    //
    // //提交背面的图片
    // function  zxc() {
    //     var formData = new FormData();
    //     formData.append('file',downfileElem.files[0]);
    //     console.log(downfileElem.files[0]);
    //
    //     $.ajax({
    //         url: SURL+'/jfd/upload/pictureUpload',
    //         type: 'post',
    //         data:formData,
    //         cache: false,
    //         processData: false,
    //         contentType: false,
    //         success: function (res) {
    //             console.log(res,'f上传成功');
    //             $('#backview').val(res.data.url);
    //             $('#downfileSelect').attr('src',res.data.url);
    //         }
    //     })
    // }
        //提交后台 所有信息
        function subAuthentication(){
            var cardId = $('#cardId').val();
            var realName = $('#realName').val();
            var frontview = $('#frontview').val();
            var backview = $('#backview').val();
            var cardUrl = $('#img_url').val();
            var cardBackUrl = $('#img_url2').val();
           var data = {
               userId: localStorage.getItem('userId'),
               realName:realName,
               cardUrl:cardUrl,
               cardBackUrl:cardBackUrl,
               cardId:cardId,

           }

            console.log('用户id',1,'身份证',cardId,'人名',realName,'正面',frontview,'反面',backview);
           if(realName == ''|| cardId==''|| frontview=='' ||backview=='') {
               alert('请补全信息')
           }else {
               $.ajax({
                   url: SURL+ '/jfd/realname/register',
                   type: 'post',
                   data:data,
                   dataType: 'JSON',
                   success: function (res) {
                        alert(res.msg);
                       // window.location.href='index.html'
                   }
               })
           }

    }
</script>
</html>
